<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 800px;height: 600px;"></div>

    <script src="./lib/echarts.min.js"></script>

    <script>
        const dom = document.querySelector("#main")
        const myChart = echarts.init(dom)

        const fruitArr = [
            {name:"榴莲",price:"25.9"},
            {name:"苹果",price:"20.9"},
            {name:"西瓜",price:"10.9"},
            {name:"山竹",price:"30.8"},
            {name:"樱桃",price:"40.6"},
        ]
        const option = {
            //标题
            title:{
                text:"水果售价"
            },
            //图例组件
            legend:{
                right:'5%',
                data:['价格']
            },
            //绘制网格
            grid:{
                left:'20%'
            },
            xAxis:{
                data:fruitArr.map( v => v.name)
            },
            yAxis:{
                //分割线
                splitLine:{
                    lineStyle  :{
                        type:"dashed"
                    }
                }
            },
            //提示框组件
            tooltip:{
                trigger:'axis'
            },
            //系列列表
            series:[
                {
                    name:'价格',
                    type:'bar',
                    data:fruitArr.map(v => v.price)
                }
            ],
            color:['#55aaff']

        }
        myChart.setOption(option);
    </script>
</body>
</html>